<template>
  <a-card title="实验室检测" :bordered="false" class="card-area">
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        labelAlign="left"
        :colon="false"
      >
        <a-tabs @change="callback" v-model="active">
          <a-tab-pane key="1" tab="血糖检查">
            <BloodSugarCheck @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="OGTT试验+胰岛功能">
            <OgttLslets @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="血脂检查">
            <BloodLipidsCheck @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="4" tab="肝功能检查">
            <LiverFunctionCheck @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="5" tab="肾功能检查">
            <KidneyFunctionCheck @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="6" tab="酮体检查">
            <KetonesCheck @next="next" :laboratory="model" />
          </a-tab-pane>
          <a-tab-pane key="7" tab="血气分析及其它">
            <BloodGasAnalysisAndOthers @next="next" :laboratory="model" />
          </a-tab-pane>
        </a-tabs>
      </a-form-model>

      <a-table bordered :columns="columns" :data-source="data" :pagination="false"> </a-table>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import BloodSugarCheck from './laboratory/BloodSugarCheck'
import OgttLslets from './laboratory/OgttLslets'
import BloodLipidsCheck from './laboratory/BloodLipidsCheck'
import LiverFunctionCheck from './laboratory/LiverFunctionCheck'
import KidneyFunctionCheck from './laboratory/KidneyFunctionCheck'
import KetonesCheck from './laboratory/KetonesCheck'
import BloodGasAnalysisAndOthers from './laboratory/BloodGasAnalysisAndOthers'
import moment from 'moment'
import bus from '@/utils/bus'

const columns = [
  {
    title: '指标',
    dataIndex: 'quota',
    key: 'quota',
    align: 'center',
    width: 300
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    align: 'center',
    width: 200
  },
  {
    title: '标准值范围',
    dataIndex: 'scope',
    key: 'scope',
    align: 'center',
    width: 200
  }
]

const data = [
  {
    key: '1',
    quota: '糖化血红蛋白(HbA1c)',
    unit: '%',
    scope: '≤6.5%'
  },
  { key: '2', quota: '肾小球滤过率(GFR)', unit: 'mL/min/1.73m2', scope: '80～120' },
  { key: '3', quota: '内生肌酐清除率', unit: 'ml/min', scope: '80~120' },
  { key: '4', quota: '血气分析-PH', unit: '-', scope: '7.35~7.45' }
]

export default {
  name: 'Laboratory',
  inject: ['closeCurrent'],
  components: {
    BloodSugarCheck,
    OgttLslets,
    BloodLipidsCheck,
    LiverFunctionCheck,
    KidneyFunctionCheck,
    KetonesCheck,
    BloodGasAnalysisAndOthers
  },
  data() {
    return {
      loading: true,
      saveLoading: false,
      confirmLoading: false,
      model: {},
      data,
      active: '1',
      type: '1',
      text: '此操作代表你已完成了页面的填写，是否继续？',
      formItemLayout: {
        labelCol: {
          xs: { span: 12 },
          sm: { span: 2 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 12,
            offset: 2
          }
        }
      },
      columns
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      getAction('102/13/1021302', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            postAction('102/13/1021301', {
              patientId: patientId
            }).then(newRes => {
              if (newRes.success) {
                this.getInfo()
              } else {
                this.$message.error('患者档案创建失败')
              }
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    next(type) {
      this.active = type
    },
    // onSave() {
    //   this.loading = true
    //   this.saveLoading = true
    //   let queryData = JSON.parse(JSON.stringify(this.model))
    //   postAction('102/13/1021301', queryData)
    //     .then(res => {
    //       if (res.success) {
    //         this.$message.success('操作成功')
    //       } else {
    //         this.$message.error('操作失败')
    //       }
    //     })
    //     .finally(_ => {
    //       this.saveLoading = false
    //       this.loading = false
    //     })
    // },
    // doConfirm() {
    //   this.confirmLoading = true

    //   let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

    //   let params = {
    //     patientId: patientId,
    //     isFinished: 1,
    //     type: this.type
    //   }
    //   postAction('102/10/1021303', params)
    //     .then(res => {
    //       if (res.success) {
    //         this.$message.success('页面已确认', 5)
    //       }
    //     })
    //     .finally(_ => {
    //       this.confirmLoading = false
    //     })
    // },
    callback(key) {
      this.type = key
    }
    // endServiceOk() {
    //   this.onSave()
    //   bus.$emit('modifiedDataForFinalReportByLab', {
    //     type: '实验室检测',
    //     data: this.model
    //   })
    //   // this.$router.back(-1)
    // }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin: 0.5rem;
}
</style>

